import React from 'react';
import {
  Image,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
  ViewStyle,
} from 'react-native';
import { Course } from '../../shared/interfaces/course.interface';
import { courseList } from '../../constants/DataList';
import { useNavigation } from '@react-navigation/native';
import { RootStackNavigationProp } from '../../types';

interface LearnedCourseCardProp {
  course: Course;
  style?: ViewStyle;
}

function LearnedCourseCard(prop: LearnedCourseCardProp) {
  const { course } = prop;
  const navigation = useNavigation<RootStackNavigationProp<'CourseInfo'>>();
  const openCourse = () => {
    navigation.navigate('CourseInfo', { courseId: course.id });
  };
  return (
    <Pressable onPress={openCourse}>
      <View style={[styles.card, prop.style]}>
        <Image
          source={{ uri: course.cover }}
          resizeMode="cover"
          style={styles.cover}
        />
        <View style={styles.courseInfo}>
          <Text style={styles.courseTitle}>{course.title}</Text>
          <View style={styles.courseSubTitleContainer}>
            <Text style={styles.courseSubTitle}>
              {course.level} {course.levelName} · {course.durationMinutes} 分钟
            </Text>
          </View>
          <Text style={styles.courseLearnedAt}>上次学习 1 天前</Text>
        </View>
      </View>
    </Pressable>
  );
}

export default function LearnedCourseList() {
  return (
    <ScrollView style={styles.container}>
      {courseList.map(course => (
        <LearnedCourseCard key={course.id} course={course} />
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 12,
  },
  card: {
    height: 80,
    backgroundColor: '#fff',
    borderRadius: 6,
    overflow: 'hidden',
    flexDirection: 'row',
    marginBottom: 12,
  },
  cover: {
    width: 120,
    backgroundColor: '#ccc',
  },
  courseInfo: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    justifyContent: 'space-between',
  },
  courseTitle: {
    fontSize: 16,
  },
  courseSubTitleContainer: {
    flexDirection: 'row',
  },
  courseSubTitle: {
    fontSize: 12,
  },
  courseLearnedAt: {
    fontSize: 12,
    color: '#666',
  },
});
